<template>
    <div style="margin: 10px;overflow: hidden">
        <Card>
            <p slot="title">
                查询
            </p>
            <div class="search-con search-con-top">
                <Select clearable v-model="searchKey" class="search-col" style="width: 100px;">
                    <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}
                    </Option>
                </Select>
                <Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue" search/>
                <Button @click="handleSearch" class="search-btn" type="primary">
                    <Icon type="search"/>&nbsp;&nbsp;搜索
                </Button>
            </div>
        </Card>
        <Card style="margin-top: 10px;">
            <ButtonGroup>
                <Button @click="toAddRoleVue()">增加角色</Button>
                <Button @click="toRegRoleVue()">修改角色</Button>
                <Button @click="deleteRole()">删除角色</Button>
            </ButtonGroup>
            <Table ref="roleTable" style="margin-top: 10px;" :data="roleDate"
                   :columns="roleColumns" :highlight-row="true" :loading="loading"
                   @on-select="operationRoleSelect" @on-select-cancel="operationRoleSelect"
                   @on-select-all="operationRoleSelect" @on-selection-change="operationRoleSelect"
                   @on-sort-change="onSortChange" stripe>
            </Table>
        </Card>
        <addRole v-model="addShow" v-on:handleSearch="handleSearch"></addRole>
        <updateRole v-model="updateShow" :roleId="roleId" v-on:handleSearch="handleSearch"></updateRole>
    </div>
</template>
<script>
    import {getRoleList,deleteRole} from '../../../api/sys/role/role-api';
    import addRole from './addRole';
    import updateRole from './updateRole';

    export default {
        components:{
            addRole,
            updateRole
        },
        data() {
            return {
                addShow:false,
                updateShow:false,
                loading: false,
                roleId:'',
                searchKey: '',
                searchValue: '',
                columns: [{key: 'roleName', title: '角色名字'}, {key: 'roleCode', title: '角色编码'}],
                total: 0,
                current: 1,
                pageSize: 10,
                selection: [],
                key: '',
                order: '',
                roleDate: [],
                roleColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '角色名字',
                        key: 'roleName',
                        sortable: true
                    }, {
                        title: '角色编码',
                        key: 'roleCode',
                        sortable: true
                    }
                ]
            };
        },
        methods: {
            onSortChange(sort) {
                if(sort.order=='normal'){
                    this.order = '';
                }else{
                    this.key = sort.key;
                    this.order = sort.order;
                }
                this.handleSearch();
            },
            handleSearch() {
                this.loading = true;
                let searchKey = this.searchKey;
                let searchValue = this.searchValue;
                let current = this.current;
                let pageSize = this.pageSize;
                let key = this.key;
                let order = this.order;
                let _this = this;
                getRoleList({
                    current,
                    pageSize,
                    searchKey,
                    searchValue,
                    sort: key,
                    order
                }).then(res => {
                    _this.total = res.totalCount;
                    _this.roleDate = res.result;
                    _this.loading = false;
                });
            },
            toAddRoleVue() {
                this.addShow = true;
            },
            toRegRoleVue() {
                if(this.selection==undefined||this.selection==''){
                    this.$Message.warning('请先选择一条需要修改的数据！');
                    return false;
                }else if(this.selection.length>1){
                    this.$Message.warning('每次只能修改一条数据！');
                    return false;
                }else{
                    this.roleId = this.selection[0].roleId;
                    this.updateShow = true;
                }
            },
            deleteRole() {
                if(this.selection.length>1 || this.selection.length==0){
                    this.$Message.warning('请先选择一条需要删除的数据！');
                    return false;
                }
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>是否删除当前你选中的角色数据？</p>',
                    onOk: () => {
                        deleteRole({roleId:this.selection[0].roleId}).then(res=>{
                            if(res.result){
                                this.$Message.success('删除数据成功！');
                                // 删除数据成功同时刷新grid
                                this.handleSearch();
                            }else{
                                this.$Message.warning('删除数据失败！');
                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('您取消了当前的操作行为！');
                    }
                });
            },
            operationRoleSelect(selection) {
                this.selection = selection;
            }
        },
        mounted(){
            this.handleSearch();
        }
    };
</script>
<style lang="less">
    @import './index.less';
</style>